<template>
    <div>
        <div class="e-m-t-30">
            <div class="flex">
                <div class="e-flex-1">
                    <el-button type="primary" icon="el-icon-plus" plain @click="dialogVisible = true;">新增员工</el-button>
                </div>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="">
                        <el-input placeholder="请输入" v-model="key" prefix-icon="el-icon-search" clearable @input="getList"></el-input>
                    </el-form-item>
                    <el-form-item class="e-m-r-0">
                        <el-button type="primary" @click="getList">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <custom-table :table-data="tableData" :columns="tableColumns" :actions="tableActions" :total="total"
            :page-index="pageIndex" :page-size="pageSize" @page-change="handlePagination"
            @action-click="handleTableAction">
            <template #ismanager="scope">
                <el-switch v-model="scope.row.ismanager" @change="switchManagerState($event, scope.row)"></el-switch>
                <!-- <el-switch v-model="scope.row.ismanager" @change="switchManagerState($event, scope.row)" active-text="是" inactive-text="否"></el-switch> -->
            </template>
        </custom-table>
        <!-- 新增员工 -->
        <el-dialog title="新增员工" :visible.sync="dialogVisible" width="500px">
            <el-form ref="addForm" :model="addForm" label-width="140px">
                <!-- <el-form-item label="选择员工">
                    <userList v-model="addForm.userId" :franchiseid="franchiseid"></userList>
                </el-form-item> -->
                <el-form-item label="手机号码" prop="mobile">
                    <autocompleteCustomer v-model="addForm.mobile" placeholder="请输入手机号码" @select="selectCustomer"
                        @change="(val) => { addForm.mobile = val; addForm.userId = 0;nameDisabled = false }"
                        @input="() => $refs.addForm.validateField('mobile')"
                        @blur="() => $refs.addForm.validateField('mobile')">
                    </autocompleteCustomer>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="addForm.name" placeholder="请输入名称" :disabled="nameDisabled"
                        @input="$refs.addForm.validateField('name')"
                        @blur="$refs.addForm.validateField('name')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addUser">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import autocompleteCustomer from "@/components/form-select-type/autocompleteCustomer.vue"
import franchiseStaffList from "@/components/form-select-type/franchiseStaffList.vue"
import userList from '@/components/form-select-type/userList.vue'
export default {
    components: {
        franchiseStaffList,
        userList,
        autocompleteCustomer
    },
    props: {
        storeId: {
            type: [Number,String],
            default: 0
        },
        franchiseid:{
            type: [Number, String],
            default: 0
        }
    },
    data() {
        return {
            key: "",
            // 添加员工
            dialogVisible: false,
            nameDisabled: false,
            addForm:{
                storeId: null,
                userId: null,
                mobile: null,
                name: ""
            },
            // 
            total: 0,
            pageIndex: 1,
            pageSize: 10,
            tableData: [],
            tableColumns: [
                {
                    prop: 'name',
                    label: '姓名',
                    width: '500'
                },
                {
                    prop: 'mobile',
                    label: '电话',
                    width: '200'
                },
                {
                    prop: 'lastlogindatetime',
                    label: '最后登录时间',
                    width: '200'
                },
                {
                    prop: 'ismanager',
                    label: '是否管理员',
                    slotName: 'ismanager',
                    // formatter: row => {
                    //     return row.ismanager ? '是' : '否'
                    // }
                }
            ],
            tableActions: [
                {
                    name: 'acdelete',
                    label: '移除'
                },
                // {
                //     name: 'edit',
                //     label: '编辑'
                // }
            ],
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        getList() {
            this.$axios.post('/Store/staff/List', {
                "PageIndex": this.pageIndex,
                "pageSize": this.pageSize,
                "Key": this.key,
                "storeId": this.storeId
            }).then((res) => {
                console.log(res)

                this.tableData = res.rows;
                this.total = res.total;
            }).catch(() => {
            })
        },
        // 翻页操作处理
        handlePagination({ pageIndex, pageSize }) {
            this.pageIndex = pageIndex
            this.pageSize = pageSize
            this.getList(false) // 获取新数据
        },
        // 操作按钮点击事件
        handleTableAction({ action, row, event }) {
            switch (action) {
                case 'acdelete':
                    this.acdelete(row.id)
                    break
                case 'edit':
                    // this.distribution(row,true)
                    break
            }
        },
        selectCustomer(obj) {
            console.log('selectCustomer', obj)
            this.nameDisabled = true
            this.addForm.name = obj.name
            this.addForm.userId = obj.id
            // this.addForm.mobile = obj.mobile
        },
        addUser(){
            this.$axios.post('/Store/Staff/Add', {
                storeId: this.storeId,
                userId: this.addForm.userId,
                mobile: this.addForm.mobile,
                name: this.addForm.name
            }).then((res) => {
                console.log(res)
                this.dialogVisible = false
                this.getList()
            }).finally(() => {
                this.nameDisabled = false
                this.$refs.addForm.resetFields()
            })
        },
        switchManagerState(event, row) {
            this.$axios.get(`/store/staff/SetManager?storeId=${this.$route.query.id}&UserId=${row.id}&isSet=${row.ismanager}`).then((res) => {
                this.$message.success(res.msg);
            }).catch((err) => {
                this.getList()
            })
        },
        // 移除
        acdelete(id) {
            this.$confirm('此操作将该员工移除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.post(`/Store/Staff/Remove?storeId=${this.$route.query.id}&UserId=${id}`).then((res) => {
                    console.log(res)
                    this.$message({
                        message: '删除成功',
                        type: 'error'
                    });
                    this.getList()
                })
            }).catch(() => {

            });
        },
    }
}
</script>

<style scoped></style>